<!DOCTYPE html>
<html>
<title>Air Quality Forecaste</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 30px 30px;
    text-decoration: none;
    font-size: 17px;
}
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color:royalblue;
    color: white;
}
</style>
<script>
        // Get the Sidebar
        var mySidebar = document.getElementById("mySidebar");
        
        // Get the DIV with overlay effect
        var overlayBg = document.getElementById("myOverlay");
        
        // Toggle between showing and hiding the sidebar, and add overlay effect
        function w3_open() {
            if (mySidebar.style.display === 'block') {
                mySidebar.style.display = 'none';
                overlayBg.style.display = "none";
            } else {
                mySidebar.style.display = 'block';
                overlayBg.style.display = "block";
            }
        }
        
        // Close the sidebar with the close button
        function w3_close() {
            mySidebar.style.display = "none";
            overlayBg.style.display = "none";
        }
        </script>
<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
        <div class="topnav">
                <a class="active" href="index.html">Home</a>
                <a href="importance.html">The Issue</a>
                <a href="solution.html">Our Solution</a>
                <a href="aboutus.html">About Us</a>
                <a href="contact.html">Contact Us</a>
                <img src="image/9837241d-60ec-43c6-8d5b-59e67252314e.png" style="position:absolute;right:3%;width:7%;top:20%">
        </div>
        
</div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="position:relative;margin-left:0;top:100px">

  <!-- Header -->
  <header class="w3-container" style="padding-top:22px">
    <h3><b><i class="fa fa-dashboard"></i>     About Us</b></h3>
    <div class = "description" style="font-size:18px;margin-left:10%;margin-right:10%">
        <p> We are a group of 3 female students participating in the Ai for
        Social Good Lab at McGill(2018 edition). </p>
        <p> This is a project we built to help people become more aware of the changes in air quality in their surrounding environment. Some areas are more susceptible to bad air quality than others, and we hope that our project will help raise awareness about climate change and also help people in their daily lives. </p>
        <p>The Team: </p>
        <img src="image/IMG_0090.JPG" style="width:15%">
        <p> Zirui (Sherry) Kuai: Undergraduate in Software Engineering at McGill University</p>
        <li><a href="https://www.linkedin.com/in/zirui-kuai/">LinkedIn</a></li>
        <li><a href="mailto:zirui.kuai@mail.mcgill.ca">zirui.kuai@mail.mcgill.ca</a></li>
        <img src="image/2.png" style="width:15%">
        <p> Yanjia Li: Undergraduate in Mathematics and Computer Science at McGill University</p>
        <img src="image/3.png" style="width:15%">
        <p> Yue Yang: Undergraduate in Computer Science at McGill University</p>
        </br>
    </div>
  </header>
  <!-- End page content -->
</div>



</body>
</html>
